<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>${fns:getConfig('productName')} 登录</title>
    <meta name="decorator" content="blank"/>
    <link href="${ctxStatic}/apestar/img/favicon.png" rel="Shortcut Icon">

    <script> window.__root = "${ctxStatic}" + "/apestar";</script>
    <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctxStatic}/apestar/css/sui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/apestar/css/common.css">
    <link rel="stylesheet" href="${ctxStatic}/apestar/vendor/swiper/swiper.min.css" charset="utf-8">
    <link rel="stylesheet" href="${ctxStatic}/apestar/vendor/alertify/css/alertify.min.css"
          charset="utf-8">
    <link rel="stylesheet" href="${ctxStatic}/apestar/vendor/validator/jquery.validator.css"
          charset="utf-8">
    <script type="text/javascript"
            src="${ctxStatic}/apestar/vendor/handlebars/handlebars.runtime-v3.0.0.js"></script>
    <script type="application/javascript"
            src="${ctxStatic}/apestar/vendor/swiper/swiper.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/apestar/js/require.config.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var mySwiper = new Swiper('.swiper-container', {
                mode: 'horizontal',
                loop: true,
                pagination: ".swiper-bullet", autoplay: 3e3
            });

            $("#loginForm").validate({
                rules: {
                    validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
                },
                messages: {
                    username: {required: "请填写用户名."}, password: {required: "请填写密码."},
                    validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
                },
                errorLabelContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    error.appendTo($("#loginError").parent());
                }
            });
        });
        // 如果在框架或在对话框中，则弹出提示并跳转到首页
        if (self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0) {
            alert('未登录或登录超时。请重新登录，谢谢！');
            top.location = "${ctx}";
        }
    </script>
</head>
<body>
<!--[if lte IE 6]><br/>
<div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close"
                                                                               data-dismiss="alert">x</a>
    <h4>温馨提示：</h4>
    <p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a>
        到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。</p></div><![endif]-->
<div class="topBar">
    <div class="subBar">
      <c:choose>
           <c:when test="${appType == 'ant_customer'}">
                  <span class="logoAnt">
		   </c:when>
		   <c:when test="${appType == 'lhl_customer'}">
                  <span class="logoLhl">
		   </c:when>
           <c:otherwise>
           		  <span class="logo">
           </c:otherwise>
     </c:choose>
    </span><span class="logo-txt">${fns:getConfig('productName')}</span></div>
</div>

<div class="loginbody sui-container">
    <div class="swiper-container">
       	<c:choose>
           <c:when test="${appType == 'ant_customer'}">
             	<div class="swiper-wrapper">
            		<div class="swiper-slide"><img src="${ctxStatic}/apestar/img/login/index1.jpg" alt="">
            		</div>
            		<div class="swiper-slide"><img src="${ctxStatic}/apestar/img/login/index4.png" alt="">
            		</div>
        	</div>
		   </c:when>
           <c:otherwise>
           
           	<div class="swiper-wrapper">
            	<div class="swiper-slide"><img src="${ctxStatic}/apestar/img/login/loginBg.jpg" alt="">
            	</div>
            	<div class="swiper-slide"><img src="${ctxStatic}/apestar/img/login/loginBg2.jpg" alt="">
            	</div>
       		 </div>
       		 
    
           </c:otherwise>
     </c:choose>

        <div class="swiper-bullet"></div>
    </div>

    <div class="loginBox">
        <ul class="loginText">
            <li>欢迎来到后台管理</li>
            <li>后台管理信息化管控平台</li>
        </ul>
        <form id="loginForm" action="${ctx}/login" method="post">
            <ul class="inputForm">
                <li>
                    <label for="username"><i
                            class="sui-icon icon-touch-user3-sign"></i>登录名</label>
                    <input type="text" id="username" name="username" data-key="user_name"
                           placeholder=""
                           value="${username}"/>
                </li>
                <li>
                    <label for="password"><i
                            class="sui-icon icon-touch-briefcase-sign"></i>密&nbsp;&nbsp;码</label>
                    <input type="password" id="password" name="password" data-key="password"
                           placeholder=""
                           value="">
                </li>
            </ul>
            <c:if test="${isValidateCodeLogin}">
                <div class="validateCode">
                    <label class="input-label mid" for="validateCode">验证码</label>
                    <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
                </div>
            </c:if><%--
		<label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
            <br><br>
            <button type="submit" id="loginSubmit" value="登录">登录</button>

            <div class="header">
                <div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
                    <button data-dismiss="alert" class="close">×</button>
                    <label id="loginError" class="error">${message}</label>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    <div class="subfooter">
        <p>后台管理信息化管控平台 Copyright &copy; ${fns:getConfig('copyrightYear')}</p>
    </div>
</div>
<script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>
</body>
</html>